<template>
  <div class="login-page">
    <div class="login-wrap">
      <div class="login">
        <!-- Logo -->
        <h1 class="login-title">
          <span class="login-title__item login-title__ico"></span>
          <span class="login-title__item login-title__text">康远互动CMS平台</span>
        </h1>

        <div class="login-form">
          <!-- 用户 -->
          <label class="login-input login-input--user">
            <span class="login-input__ico"></span>
            <span
              v-show="focusIndex === 1 && userName !== ''"
              class="login-input__clear"
              @click="userName = ''"
            ></span>
            <input
              v-model.trim="userName"
              type="text"
              placeholder="请输入账号"
              class="login-input__input"
              @focus="focusIndex = 1"
            />
            <span class="login-input__border"></span>
          </label>

          <!-- 密码 -->
          <label class="login-input login-input--pass">
            <span class="login-input__ico"></span>
            <span
              v-show="focusIndex === 2 && pwd !== ''"
              class="login-input__clear"
              @click="pwd = ''"
            ></span>
            <input
              @keydown.enter="login"
              v-model.trim="pwd"
              type="password"
              placeholder="请输入密码"
              class="login-input__input"
              @focus="focusIndex = 2"
            />
            <span class="login-input__border"></span>
          </label>

          <!-- 登录 -->
          <input
            @click="login"
            type="submit"
            class="login-submit"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import crypto from "crypto";
import { sessionStorage, getLoginEntry } from "@/util";
export default {
  data() {
    return {
      focusIndex: -1,
      userName: "",
      pwd: ""
    };
  },
  methods: {
    login() {
      this.$http({
        method: "post",
        url: this.apiUrl.userLogin,
        data: {
          userName: this.userName,
          pwd: crypto
            .createHash("md5")
            .update(this.pwd)
            .digest("hex")
        }
      }).then(res => {
        var data = res.data;
        if (data.status == 1) {
          sessionStorage.set("user", data);
          let path = getLoginEntry();
          if (path) {
            this.$router.push({
              path
            });
          } else {
            this.$message({
              type: "error",
              message: "账号没有权限"
            });
          }
        } else {
          this.$message({
            type: "error",
            message: "用户名或密码错误"
          });
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.login-page {
  width: 100%;
  height: 100%;
  background: url(../assets/img/login-bg.jpg) 50% 50% no-repeat;
}

.login-wrap {
  position: absolute;
  top: 50%;
  width: 100%;
  height: 366px;
  margin-top: -190px;
  background: rgba(0, 0, 0, 0.7);
}

.login {
  position: absolute;
  left: 50%;
  margin-left: -460px;
  width: 920px;
  color: #fff;
  padding: 28px 0 0 31px;
}

.login-title {
  margin: 60px 0 40px;

  &__item {
    display: inline-block;
    vertical-align: middle;
  }

  &__ico {
    width: 64px;
    height: 64px;
    margin-right: 20px;
    background: url(../assets/img/logo-mini.png) 0 0 no-repeat;
  }

  &__text {
    font-size: 64px;
    line-height: 1;
    font-weight: 700;
  }
}

.login-form {
  margin-bottom: 25px;
  height: 68px;
}

.login-input {
  position: relative;
  float: left;
  width: 370px;
  height: 66px;
  background: #fff;

  &__border {
    position: absolute;
    top: -2px;
    left: -2px;
    border: 2px solid #e6e6e6;
    width: 100%;
    height: 100%;
  }

  &__ico,
  &__clear {
    z-index: 1;
  }

  &__ico {
    position: absolute;
    top: 0;
    left: 0;
    width: 58px;
    height: 66px;
  }

  &__clear {
    position: absolute;
    right: 26px;
    top: 20px;
    width: 27px;
    height: 27px;
    background: url(../assets/img/login-clear.png) 0 0 no-repeat;
    cursor: pointer;
  }

  &__input {
    width: 250px;
    height: 34px;
    font-size: 22px;
    margin: 16px 63px 16px 58px;
    background: transparent;
    border: 0 none;
    outline: none;

    &::-ms-clear {
      display: none;
    }

    &::placeholder {
      color: #949699;
    }

    &:-webkit-autofill {
      box-shadow: 0 0 0 1000px #fff inset !important;
    }

    &:focus ~ .login-input__border {
      border-color: #04c1fe;
    }
  }

  &--user {
    margin-right: 31px;
  }

  &--user &__ico {
    background: url(../assets/img/login-user.png) 50% 50% no-repeat;
  }

  &--pass {
    margin-right: 40px;
  }

  &--pass &__ico {
    background: url(../assets/img/login-pass.png) 50% 50% no-repeat;
  }
}

.login-submit {
  float: left;
  width: 68px;
  height: 68px;
  background: url(../assets/img/login-enter.png) 0 0 no-repeat;
  border: 0 none;
  text-indent: -999em;
  outline: none;
  cursor: pointer;
}
</style>